{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
    .layui-card-header {
        height: 40px;
        line-height: 40px;
        border-bottom: none
    }

    .square .layui-col-md4 {
        border: 1px solid #f5f5f5;
        cursor: pointer;
    }

    .square .layui-col-md4 div {
        padding: 15px 0;
        text-align: center;
        background-color: #fff;
        color: #666
    }

    .square .layui-col-md4 i {
        font-size: 24px;
        font-weight: 800;
        display: block;
        padding-bottom: 5px;
        color: #4285f4
    }

    .square .layui-col-md4:nth-child(3n-1), .square .layui-col-md4:nth-child(3n-2) {
        border-left: 0;
    }

    .square .layui-col-md4:nth-child(3n) {
        border-left: 0;
        border-right: 0;
    }

    .square .layui-col-md4:nth-child(n+4) {
        margin-top: -1px;
    }

    .square .layui-col-md4 div:hover {
        color: #4285f4;
        background-color: #fafafa
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-page">
    <div class="layui-row layui-col-space16">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header" style="border-bottom:1px solid #eee;"><h3 class="h3-title">审批新申请</h3>
                </div>
                {volist name="type" id="v" offset="0" length='6'}
                <div class="layui-card-header"><strong>{$v.title}</strong></div>
                <div class="square">
                    <div class="layui-row">
                        {volist name="list" id="vo"}
                        {eq name="vo.type" value="$v.id"}
                        <div class="layui-col-md4" data-type="{$vo.id}" title="{$vo.title}">
                            <div><i class="iconfont {$vo.icon}"></i>{$vo.title}</div>
                        </div>
                        {/eq}
                        {/volist}
                    </div>
                </div>
                {/volist}
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="body-table layui-tab layui-tab-brief" lay-filter="tab">
                    <ul class="layui-tab-title" style="border:none;">
                        <li class="layui-this">全部</li>
                        <li>待审批</li>
                        <li>审批通过</li>
                        <li>审批拒绝</li>
                    </ul>
                    <div class="layui-tab-content" style="padding:0">
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <h3 class="h3-title" style="height:28px;">审批列表</h3>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];

    function gouguInit() {
        var table = layui.table, tool = layui.tool, element = layui.element;

        element.on('tab(tab)', function (data) {
            layui.pageTable.reload({where: {status: data.index}, page: {curr: 1}});
            return false;
        });

        layui.pageTable = table.render({
            elem: '#test'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: false
            , title: '审批列表'
            , url: "/oa/approve/index"
            , page: true //开启分页
            , limit: 20
            , cellMinWidth: 80
            , cols: [[
                {field: 'id', width: 80, title: 'ID号', align: 'center'}
                , {field: 'name', title: '申请人', width: 150, align: 'center'}
                , {field: 'create_time', title: '申请时间', width: 200, align: 'center'}
                , {field: 'flow_type', title: '审批类型', width: 200, align: 'center'}
                , {field: 'department_name', title: '所属部门', width: 200, align: 'center'}
                ,{field:'check_user',title: '当前审批人'}
                , {
                    field: 'check_status', title: '审批状态', width: 80, align: 'center', templet: function (d) {
                        var htmlArray = ['<span style="color:#666666">待审批</span>', '<span style="color:#4285f4">审批中</span>', '<span style="color:#34a853">已通过</span>', '<span style="color:#FF5722">已拒绝</span>', '<span style="color:#fbbc05">已撤销</span>'];
                        return htmlArray[d.check_status];
                    }
                }
                , {
                    width: 60, title: '操作', align: 'center', templet: function (d) {
                        var btn = '<a class="layui-btn layui-btn-xs" lay-event="view">详情</a>';
                        return btn;
                    }
                }
            ]]
        });

        table.on('tool(test)', function (obj) {
            if (obj.event === 'view') {
                if (obj.data.type == 26) {
                    tool.side('/busine/index/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 27) {
                    tool.side('/busine/index/payment_view?id=' + obj.data.action_id);
                } else if (obj.data.type == 28) {
                    tool.side('/busine/businetransfer/view?id=' + obj.data.action_id);
                }else if(obj.data.type ==29){
                    tool.side('/busine/businetransfer/payment_view?id='+obj.data.action_id);
                }else if(obj.data.type ==30){
                    tool.side('/busine/businetransfer/playback_view?id='+obj.data.action_id);
                } else if(obj.data.type ==31){
                    tool.side('/cert/index/view?id='+obj.data.action_id);
                } else if(obj.data.type ==32){
                    tool.side('/cert/index/payment_view?id='+obj.data.action_id);
                } else if(obj.data.type ==33){
                    tool.side('/cert/accountopen/view?id='+obj.data.action_id);
                } else if(obj.data.type ==34){
                    tool.side('/cert/accountopen/payment_view?id='+obj.data.action_id);
                } else if(obj.data.type ==35){
                    tool.side('/jobproject/busine/view?id='+obj.data.action_id);
                } else if(obj.data.type ==36){
                    tool.side('/bitjob/enterpriseouter/view?id='+obj.data.action_id);
                } else if (obj.data.type == 37) {
                    tool.side('/bitjob/enterpriseouter/payment_view?id=' + obj.data.action_id);
                } else if (obj.data.type == 38) {
                    tool.side('/bitjob/putpay/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 39) {
                    tool.side('/finance/inregister/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 40) {
                    tool.side('/cert/indexfinance/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 41) {
                    tool.side('/cert/accountopenfinance/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 42) {
                    tool.side('/finance/intransact/view?id=' + obj.data.action_id);
                } else if (obj.data.type == 43) {
                    tool.side('/finance/salary/detail?id=' + obj.data.action_id);
                } else {
                    tool.side('/oa/approve/view?id=' + obj.data.id);
                }

            }
        });

        $('.square').on('click', '.layui-col-md4', function () {
            var type = $(this).data('type');
            tool.side('/oa/approve/add?type=' + type);
        });

    }
</script>
{/block}
<!-- /脚本 -->